<template>
	<view class="dictation_exercise_box">
		<view class="box">
			<view class="content">
				<view class="icon" @tap="showInterpretation = !showInterpretation">
					<uni-icons type="eye" size="28" v-show="showInterpretation"></uni-icons>
					<uni-icons type="eye-slash" size="28" v-show="!showInterpretation"></uni-icons>
				</view>
				<view class="word">
					<view v-show="!showInterpretation">
						<view class="word_hide flex_ac_jc">
						  <view :class="['bar', isPlay ? 'bar_play' : '']" v-for="(item, index) in 7" :key="index"></view>
						</view>
					</view>
					<view class="word_show" v-show="showInterpretation">
						<view class="title1">{{ wordInfo.word }}</view>
						<view class="title2">{{ wordInfo.annotation }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_box flex_ac_js">
			<view class="btn_item" @tap="openWordList">
				<uni-icons type="list" size="28" color="#572f6b"></uni-icons>
			</view>
			<view class="flex_ac_js" style="width: 42%;">
				<view class="btn_item" @tap="wordPrev">
					<image src="@/static/images/icon/prev.svg"></image>
					<!-- <uni-icons type="arrow-left" size="28" color="#4c46f0"></uni-icons> -->
				</view>
				<view class="btn_item_play" @tap="isPlay = !isPlay">
					<image src="@/static/images/icon/play.svg" v-show="!isPlay" @click="play"></image>
					<image src="@/static/images/icon/pause.svg" v-show="isPlay" @click="pause"></image>
				</view>
				<view class="btn_item" @tap="wordNext">
					<image src="@/static/images/icon/next.svg"></image>
					<!-- <uni-icons type="arrow-right" size="28" color="#4c46f0"></uni-icons> -->
				</view>
			</view>
			
			<view class="btn_item" @tap="openSetAudio">
				<uni-icons type="gear-filled" size="28" color="#572f6b"></uni-icons>
			</view>
		</view>
		
		<uni-popup ref="popupWord" type="left" background-color="#fff">
			<view class="popup_box">
				<scroll-view scroll-y style="height: 100%;">
					<view class="list_item" v-for="(item, index) in words" :key="item.id" @tap="switchWord(index)" :style="{ 'color': wordIndex === index ? '#0000ffb0' : '#333', 'borderColor': wordIndex === index ? '#0000ffb0' : '#d7d7d7'}">
						<view class="text1">{{ item.word }}</view>
						<view class="text2">{{ item.annotation }}</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popupAudio" type="bottom" background-color="#fff">
			<view class="popup_audio_box">
				<view class="icon" @tap="$refs.popupAudio.close()">
					<uni-icons type="closeempty" size="24" color="#575757"></uni-icons>
				</view>
				<view class="audio_item">
					<view class="title">播放方式</view>
					<view class="tabs flex_ac_js">
						<view :class="['tab_item', audioWay === 0 ? 'tab_item_active' : '']" @tap="audioWay = 0">播放英文</view>
						<!-- <view :class="['tab_item', audioWay === 1 ? 'tab_item_active' : '']" @tap="audioWay = 1">播放中文</view> -->
					</view>
				</view>
				<view class="audio_item">
					<view class="title">播放次数</view>
					<view class="tabs flex_ac_js">
						<view :class="['tab_item', audioCount === 0 ? 'tab_item_active' : '']" @tap="audioCount = 0">1次</view>
						<view :class="['tab_item', audioCount === 1 ? 'tab_item_active' : '']" @tap="audioCount = 1">2次</view>
						<view :class="['tab_item', audioCount === 2 ? 'tab_item_active' : '']" @tap="audioCount = 2">3次</view>
					</view>
				</view>
				<view class="audio_item">
					<view class="title">播放间隔</view>
					<view class="tabs flex_ac_js">
						<view :class="['tab_item', audioInterval === 0 ? 'tab_item_active' : '']" @tap="audioInterval = 0">2秒</view>
						<view :class="['tab_item', audioInterval === 1 ? 'tab_item_active' : '']" @tap="audioInterval = 1">4秒</view>
						<view :class="['tab_item', audioInterval === 2 ? 'tab_item_active' : '']" @tap="audioInterval = 2">6秒</view>
						<view :class="['tab_item', audioInterval === 3 ? 'tab_item_active' : '']" @tap="audioInterval = 3">8秒</view>
					</view>
				</view>
				<view class="set_btn" @tap="setSubmit">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getStudyWord } from '@/api/practices/wordChoice.js'
	import { listWord, reciteWord, reviewWordPlan, wordByPlan, reviewWordBook, readWord } from '@/api/word/word.js'
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				showInterpretation: false,
				showWordList: false,
				words: [],
				wordInfo: {},
				wordIndex: 0,
				audioWay: 0, //播放方式
				audioCount: 0, //播放次数
				audioInterval: 0, //播放间隔
				isPlay: false,
				state: {
					id: '',
					type: ''
				},
				wordList:[],
			}
		},
		onLoad() {
			this.state = uni.getStorageSync('words')
			this.words = uni.getStorageSync("wordsInfoList")
			if (this.state.type === 'planReview') {
				this.getWordDetailsPlan()
			} else if (this.state.type === 'bookReview') {
				this.getWordDetailsReview()
			} else if (this.state.type === 'planStudy') {
				this.getWordByPlan()
			} else if (this.state.type === 'bookStudy') {
				this.getWordData()
			} else if (this.state.type === 'wordChoice') {
				this.getStudyWordData()
			}
			
		},
		methods: {
			
			play(){
				console.log("正在播放");
				console.log("当前单词",this.wordInfo);
			 
				let count = 0
				let interval = 0
				
			 
				if (this.audioCount == 0) {
					count = 1
				} else if (this.audioCount == 1) {
					count = 2
				} else {
					count = 3
				}
				if (this.audioInterval == 0) {
					interval = 2000
				} else if (this.audioCount == 1) {
					interval = 4000
				} else if (this.audioCount == 2){
					interval = 6000
				} else {
					interval = 8000
				}
				this.setPlayAudio(count,interval)
			},
			
			pause(){    
				console.log("暂停播放");
			},
			
			setPlayAudio(count,interval) {  // 0 1 2--- 1 2 3      0 1 2 3 ---2 4 6 8  
				let currentCount = 0;
				    const intervalId = setInterval(() => {
				        // 模拟要执行的操作，这里简单地打印当前执行次数
				        this.palyAudio()
				        currentCount++;
				        if (currentCount >= count) {
				            // 达到指定执行次数后，清除定时器
				            clearInterval(intervalId);
				        }
				    }, interval);
				
			},
			//播放音频
			palyAudio() {
				// console.log("dddddddddddddddddd");
				let word = this.wordInfo.word
				innerAudioContext.src=`http://192.168.3.95:8081/api/studyWord/getWordAudio?word=${word}&usORuk=us`
				innerAudioContext.play()
			},
			
			setSubmit(){
				console.log(this.audioWay,this.audioCount,this.audioInterval);
				this.$refs.popupAudio.close()
				
			},
			
			async getStudyWordData() {
				const { data } = await getStudyWord()
				this.words = data
				this.wordInfo = data[0]
			},
			// 计划复习
			async getWordDetailsPlan() {
				const { data } = await reviewWordPlan(this.state.id)
				this.words = data
				if (this.words && this.words.length > 0) {
					this.wordInfo = this.words[this.wordIndex]
				} else {
					this.wordInfo = null
				}
			},
			// 课本复习
			async getWordDetailsReview() {
				const { data } = await reviewWordBook(this.state.id)
				this.words = data
				if (this.words && this.words.length > 0) {
					this.wordInfo = this.words[this.wordIndex]
				} else {
					this.wordInfo = null
				}
			},
			// 计划学习
			async getWordByPlan(){
				// const { data } = await wordByPlan(this.state.id)
				// this.words = data
				
				// if (this.words && this.words.length > 0) {
					this.wordInfo = this.words[this.wordIndex]
				// } else {
				// 	this.wordInfo = null
				// }
			},
			// 单词列表
			async getWordData() {
				let params = {
					page: 1,
					size: 2000,
					data: this.state.id
				}
				const { data } = await listWord(params)
				this.words = data
				if (this.words && this.words.length > 0) {
					this.wordInfo = this.words[this.wordIndex]
				} else {
					this.wordInfo = null
				}
			},
			openWordList() {
				this.$refs.popupWord.open()
			},
			openSetAudio() {
				this.$refs.popupAudio.open()
			},
			// 切换单词
			switchWord(index) {
				this.wordIndex = index
				this.showInterpretation = false
				this.wordInfo = this.words[index]
				this.$refs.popupWord.close()
			},
			wordPrev() {
				this.showInterpretation = false
				this.wordIndex = Math.max(this.wordIndex - 1, 0)
				this.wordInfo = this.words[this.wordIndex]
				this.isPlay= false
				this.pause()
			},
			wordNext() {
				if(this.wordIndex == this.words.length-1) {
					uni.showToast({
						title:"已经是最后一个单词了",
						icon:'error',
						duration:1000
					})
					return
				}
				this.showInterpretation = false
				this.wordIndex = Math.min(this.wordIndex + 1, this.words.length - 1)
				this.wordInfo = this.words[this.wordIndex]
				this.isPlay= false
				this.pause()
				
			},
		}
	}
</script>

<style lang="scss" scoped>
.dictation_exercise_box {
	height: 100vh;
	background: $uni-bg-color-page;
	
	.box {
		height: calc(100% - env(safe-area-inset-bottom) - 132rpx);
		padding: 30rpx;
		
		.content {
			width: 100%;
			height: 100%;
			padding: 30rpx;
			background-color: $uni-bg-color;
			border-radius: 12rpx;
			position: relative;
			
			.icon {
				display: inline-block;
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
			
			.word {
				width: 72%;
				height: auto;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				
				.word_hide {
					width: 72%;
					height: 120rpx;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
				  
					.bar {
						background-color: $uni-text-color;
						width: 12rpx;
						height: 100%;
						margin: 0 10rpx;
						border-radius: 10rpx;
					}
					
					.bar_play {
						&:nth-child(1) {
							animation: load 2.5s 0.6s infinite linear;
						}
						
						&:nth-child(2) {
							animation: load 2.5s 0.4s infinite linear;
						}
						
						&:nth-child(3) {
							animation: load 2.5s 0.2s infinite linear;
						}
						
						&:nth-child(4) {
							animation: load 2.5s 0s infinite linear;
						}
						
						&:nth-child(5) {
							animation: load 2.5s 0.2s infinite linear;
						}
						
						&:nth-child(6) {
							animation: load 2.5s 0.4s infinite linear;
						}
						
						&:nth-child(7) {
							animation: load 2.5s 0.6s infinite linear;
						}
					}
					
					@keyframes load {
						0% {
							height: 100%;
						}
						50% {
							height: 10%;
						}
						100% {
							height: 100%;
						}
					}
				}
				
				.word_show {
					text-align: center;
					
					.title1 {
						font-weight: bold;
						font-size: 56rpx;
						margin-bottom: 20rpx;
					}
					
					.title2 {
						font-size: 28rpx;
						color: $uni-text-color;
					}
				}
			}
		}
	}
	
	.btn_box {
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 132rpx);
		padding: 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		background-color: #eff4ff;
		
		.btn_item_play {
			position: relative;
			
			image {
				width: 68rpx;
				height: 68rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		
		.btn_item image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.popup_box {
		width: 500rpx;
		height: 100vh;
		
		.list_item {
			padding: 20rpx 30rpx;
			border-bottom: 2rpx solid;
			font-size: 28rpx;
			
			.text1 {
				font-weight: bold;
				font-size: 32rpx;
				margin-bottom: 6rpx;
			}
			
			.text2 {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.popup_audio_box {
		padding: 30rpx;
		position: relative;
		
		.icon {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
		
		.audio_item {
			margin-top: 50rpx;
			
			.title {
				padding-left: 14rpx;
				margin-bottom: 30rpx;
				position: relative;
				
				&:before {
					content: '';
					width: 6rpx;
					height: 26rpx;
					display: block;
					background-color: #00f9;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			
			.tabs {
				width: 80%;
				height: 84rpx;
				margin: 0 auto;
				padding: 10rpx;
				background-color: #f2f2f2;
				border-radius: 8rpx;
				
				.tab_item {
					flex: 1;
					height: 100%;
					line-height: 64rpx;
					text-align: center;
					font-size: 28rpx;
				}
				
				.tab_item_active {
					background-color: $uni-bg-color;
					border-radius: 8rpx;
				}
			}
		}
		
		.set_btn {
			width: 88%;
			height: 64rpx;
			margin: 80rpx auto 0;
			line-height: 64rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			background-color: $uni-color-primary;
			color: $uni-text-color-inverse;
		}
	}
}
</style>
